<template>
	<div class="zco-testimonywrite-response-container">
		<p>{{ getTestimonyWriteStatus }}</p>
		<div v-if="status === 'done'" class="imgbox" :style="getStyle">
			<p>抄录图片：</p>
			<img :src="imageUrl" width="100%" height="98" @click="preview" />
		</div>
		<template v-else>
			<p>{{ getTestimonyWriteFailedText }}</p>
		</template>
	</div>
</template>
<script>
import ZcoIM from '../../index';
import zcoIMEvent from '@/store/event';
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		status: {
			type: String,
			default: () => ''
		},
		imageUrl: {
			type: String,
			default: () => ''
		},
		fromUserName: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getTestimonyWriteStatus() {
			return `致 <${this.toUserRole === 'agent' ? '坐席' : '访客'}${this.toUserName}>，${this.status === 'done' ? '提交成功' : '提交失败'}`;
		},
		getTestimonyWriteFailedText() {
			return `原因：访客拒绝`;
		},
		getStyle() {
			if ((ZcoIM.agent && this.fromUserName === ZcoIM.agent.userName) || (ZcoIM.client && this.fromUserName === ZcoIM.client.userName)) {
				return 'text-align: right;';
			} else {
				return '';
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		preview() {
			zcoIMEvent.emitPreview({ type: 'png', url: this.imageUrl });
		}
	},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-testimonywrite-response-container p {
	margin: 0;
}
.imgbox p {
	margin: 0;
}
.imgbox {
    background: #fff;
}
</style>
